<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :modal="true"
      top="10vh"
      width="800px"
      @closed="closed"
    >
      <el-form ref="pathForms" :model="pathForm" :rules="rules">
        <el-form-item label-width="100px" label="名称" prop="name">
          <el-input v-model="pathForm.name" placeholder="请输入名称" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="标识" prop="code">
          <el-input v-model="pathForm.code" placeholder="请输入标识" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="坐标类型" prop="coordType">
          <el-select v-model="pathForm.coordType" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in coordTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="高度类型" prop="coordZType">
          <el-select v-model="pathForm.coordZType" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in coordZTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label-width="100px" label="宽度" prop="width">
          <el-input-number v-model="pathForm.width"  label="请输入宽度" style="width: 100%;"></el-input-number>
        </el-form-item>

        <el-form-item label-width="100px" label="颜色" prop="width">
          <el-color-picker v-model="pathForm.color" size="medium"></el-color-picker>
        </el-form-item>

        <el-form-item label-width="100px" label="样式" prop="styleType">
          <el-input v-model="pathForm.styleType"   label="请输入样式" style="width: 100%;"></el-input>
        </el-form-item>

        <el-form-item label-width="100px" label="覆盖颜色" prop="styleType">
          <el-color-picker v-model="pathForm.passColor" size="medium"></el-color-picker>
        </el-form-item>

        <el-form-item label-width="100px" label="坐标" prop="points">
            <vue-json-editor
                    v-model="pathForm.points"
                    :showBtns="false"
                    :mode="'code'"
                    lang="zh"
                    :expandedOnStart="true"
                   />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import vueJsonEditor from 'vue-json-editor'

import {
  saveScenePath,
  getScenePathById
} from '@/api/51world/sceneSrcPath.js'
import {
  isOk
} from '@/utils/request'
export default {
  name: 'PathInfoDialog',
   components: { vueJsonEditor },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      title: '',
      buttonLoading: false,
      pathForm: {
        id: '',
        sceneId:'',
        srcId:'',
        name: '',
        code: '',
        coordType: 0,
        coordZType: 0,
        width: 5,
        color: '',
        styleType: '',
        passColor: '',
        points: [],
        from:'0',
      },
      coordTypeOptions:[
        {
          value: 0,
          label: '经纬度坐标'
        },
        {
          value: 1,
          label: 'cad坐标'
        }
      ],
      coordZTypeOptions:[
        {
          value: 0,
          label: '相对3D世界表面'
        },
        {
          value: 1,
          label: '相对3D世界地面'
        },
        {
          value: 2,
          label: '相对3D世界海拔'
        },
      ],
      rules: {
        name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 50,
          message: '长度在 2 到 50 个字符',
          trigger: 'blur'
        }
        ],
        coordZ: [{
          required: true,
          message: '请输入高度',
          trigger: 'blur'
        },
        ]
      }
    }
  },
  computed: {

  },
  watch: {
    dialogVisible: {
      handler: function(value) {
        this.visible = value
      },
      immediate: true,
      deep: false
    },
    dialogData: {
      handler: function(nValue) {
        if (nValue) {
          if(nValue.id){
             this.title = '编辑'
          }else{
            this.title = '新增'
          }
          this.pathForm.id = nValue.id || ''
          this.pathForm.sceneId = nValue.sceneId || ''
          this.pathForm.srcId = nValue.srcId || ''
          this.pathForm.name = nValue.name || ''
          this.pathForm.code = nValue.code || ''
          this.pathForm.coordType = nValue.coordType || 0
          this.pathForm.coordZType = nValue.coordZType || 0
          this.pathForm.color = nValue.color || ''
          this.pathForm.styleType = nValue.styleType || ''
          this.pathForm.passColor = nValue.passColor || ''
          this.pathForm.width = nValue.width || 5
          this.pathForm.from = nValue.from || '0'
          if(nValue.points){
            this.pathForm.points =JSON.parse(nValue.points)  || []
          }else{
            this.pathForm.points =[]
          }
        }
        else{
           this.title = '新增'
        }
      },
      immediate: true,
      deep: false
    }
  },
  mounted: function() {
  },
  created() {
    if(this.pathForm.id){
      this.getScenePathById()
    }
  },
  methods: {
    submitForm: function() {
      this.$refs.pathForms.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          this.pathForm.points=JSON.stringify(this.pathForm.points);
          saveScenePath(this.pathForm).then(rsp => {
            if (isOk(rsp)) {
                this.$message({
                  type: 'success',
                  message: '成功!'
                })
              this.buttonLoading = false
              this.closed()
            }
          })
          this.pathForm.points=JSON.parse(this.pathForm.points)
        }
      })
    },
    getScenePathById(){
      this.buttonLoading = true
      getScenePathById({
        id:this.pathForm.id
      }).then(rsp => {
        if (isOk(rsp)) {
          const nValue=rsp.data;
          this.pathForm.id = nValue.id || ''
          this.pathForm.srcId = nValue.srcId || ''
          this.pathForm.name = nValue.name || ''
          this.pathForm.code = nValue.code || ''
          this.pathForm.coordType = nValue.coordType || 0
          this.pathForm.coordZType = nValue.coordZType || 0
          this.pathForm.color = nValue.color || ''
          this.pathForm.styleType = nValue.styleType || ''
          this.pathForm.passColor = nValue.passColor || ''
          this.pathForm.width = nValue.width || 5
          this.pathForm.from = nValue.from || '0'
          if(nValue.points){
            this.pathForm.points =JSON.parse(nValue.points)  || []
          }else{
            this.pathForm.points =[]
          }
          this.buttonLoading = false
        }
      })
    },
    closed: function() {
      this.$emit('closed', false)
    }
  }
}
</script>

<style lang="scss">
  .info-dialog {

  }
</style>
